<template>
  <div class="shrimp_guide">
    <el-card>
      <template #header>
        <a>热门活虾导购 ></a>
      </template>
      <div v-for="shrimp in shrimpList" :key="shrimp" class="shrimp">
        <el-row>
          <el-image :src="shrimp.getIcon()" class="popular_shrimp" fit="fill">
            <template #placeholder>
              <div class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </template>
          </el-image>
        </el-row>
        <el-row>
          <span class="shrimp_name">{{ shrimp.getName() }}</span>
        </el-row>
      </div>
      <div v-if="shrimpList.length === 0" class="shrimp">
        <el-empty description="呀！暂时没有符合条件的活品"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
import {Fresh} from "@/pojo/Fresh";

export default{
  name: "ShrimpGuide",
  data() {
    return {
      shrimpList: [
        new Fresh()
            .setName("斑节对虾")
            .setIcon(require("@/assets/MerchantFresh/merchant1fresh2.jpg")),
        new Fresh()
            .setName("南美白对虾")
            .setIcon(require("@/assets/MerchantFresh/merchant1fresh1.jpg")),
        new Fresh()
            .setIcon(require("@/assets/MerchantFresh/merchant2fresh1.jpg"))
            .setName("中国对虾")
      ]
    };
  }
};
</script>

<style scoped>

.popular_shrimp {
  width: 100%;
  height: 210px;
  padding-bottom: 10px;
  margin-right: 40px;
}

.shrimp {
  float: left;
  width: 280px;
  height: 300px;
  cursor: pointer;
}

.shrimp_guide {
  margin-bottom: 10px;
}

.shrimp_name {
  margin-bottom: 10px;
  font-size: 14px;
  width: 85%;
}
</style>